<div class="ui big modal">
    <i class="close icon"></i>
    <div class="header">
        Untrusted Certificate
    </div>
    <div class="content">
        <p>By trusting this certificate you accept the implications it can have on your security and understand
        the consequences of doing so. Never trust a certificate which you do not know the origin of.</p>

        <div class="ui equal width stackable grid">

            <!--
                Certificate
            -->
            <div class="column">
                <h3 class="ui dividing header">
                  Certificate
                </h3>

                <div class="ui list">
                    <div class="item">
                        <i class="user secret big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Self Signed</div>
                            <span>
                                <a ng-if="data.selfSigned">Yes</a>
                                <a ng-if="!data.selfSigned">No</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="calendar check big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Valid From</div>
                            <span>
                                <a>{{data.validFrom | epoch}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="calendar times big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Valid To</div>
                            <span>
                                <a>{{data.validTo | epoch}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="certificate big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Serial Number</div>
                            <span>
                                <a>{{data.serialNumber}}</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!--
                Issuer
            -->
            <div class="column">
                <h3 class="ui dividing header">
                  Issuer
                </h3>

                <div class="ui list">
                    <div class="item">
                        <i class="building big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Organization</div>
                            <span>
                                <a>{{data.issuer.organization}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="map marker alternate big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Organization Unit</div>
                            <span>
                                <a>{{data.issuer.organizationUnit}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="paper plane big icon"></i>
                        <div class="content">
                            <div class="ui sub header">State</div>
                            <span>
                                <a>{{data.issuer.state}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="globe big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Country</div>
                            <span>
                                <a>{{data.issuer.country}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="user big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Common Name</div>
                            <span>
                                <a>{{data.issuer.commonName}}</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!--
                Subject
            -->
            <div class="column">
                <h3 class="ui dividing header">
                  Subject
                </h3>

                <div class="ui list">
                    <div class="item">
                        <i class="building big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Organization</div>
                            <span>
                                <a>{{data.subject.organization}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="map marker alternate big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Organization Unit</div>
                            <span>
                                <a>{{data.subject.organizationUnit}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="paper plane big icon"></i>
                        <div class="content">
                            <div class="ui sub header">State</div>
                            <span>
                                <a>{{data.subject.state}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="globe big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Country</div>
                            <span>
                                <a>{{data.subject.country}}</a>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <i class="user big icon"></i>
                        <div class="content">
                            <div class="ui sub header">Common Name</div>
                            <span>
                                <a>{{data.subject.commonName}}</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="actions">
        <div class="ui stackable grid">
              <div class="ten wide column">
                  <div class="ui left icon fluid input">
                        <input name="Fingerprint" type="text" readonly ng-model="data.fingerprint">
                        <i class="address card icon"></i>
                  </div>
              </div>
              <div class="six wide column">
                  <a class="ui red deny button">
                      Cancel
                  </a>
                  <button type="submit" class="ui black ok right labeled icon button">
                      Trust
                      <i class="address card icon"></i>
                  </button>
              </div>
        </div>

    </div>
</div>
